<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
    <div class="layui-form-item">演员信息和图片 <input type="text" id="name" lay-verify="required" placeholder="请输入演员姓名" autocomplete="off"
            class="layui-input" style="width:200px;display:inline-block;"><input type="text" id="playName" lay-verify="required" placeholder="请输入饰演角色" autocomplete="off"
            class="layui-input" style="width:200px;display:inline-block;"><button type="button" class="layui-btn" id="test1"
            style="margin-left:20px;"><i class="layui-icon">&#xe67c;</i>上传图片</button>
            <input type="text" name="poster" placeholder="请输入" autocomplete="off" class="layui-input" id="getPath">
            <button type="button" class="layui-btn" id="test2"
            style="margin-left:20px;"><i class="layui-icon">&#xe67c;</i>确定添加</button>
        <table id="dec" lay-filter="test"></table>

        <script src="../js/lodash.min.js"></script>
        <script src="../layui/layui.js"></script>
        <script src="../js/jquery-1.12.4.min.js"></script>
        <script>
            $("#getPath").css("display", "none")
            layui.use('upload', function () {
                var upload = layui.upload;

                //执行实例
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    , url: '/api/movieupload/' //上传接口
                    , field: "imgfile"
                    , acceptMime: "image/*"
                    , size: 500
                    , drage: true
                    , done: function (res) {
                        //上传完毕回调
                        $("#getPath").val(res.data[0])
                    }
                    , error: function () {
                        //请求异常回调
                        console.log("错误")
                    }
                });
            });

            layui.use('table', function () {
                const table = layui.table;
                const id = localStorage.getItem("actorid")
                const tabObj = table.render({
                    elem: '#dec', url: '/api/movie/'+id, autoSort: true, page: true
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.count, //解析数据长度
                            "data": res.data.actor //解析数据列表
                        };
                    },
                    cols: [[{
                        field: 'name',
                        title: '演员名',
                        sort: true,
                        width: 200
                    },
                    {
                        field: 'filmName',
                        title: '饰演名',
                        sort: true,
                        width: 200
                    },
                    {
                        field: 'image',
                        title: '图片',
                        templet: `#img`,
                        sort: true,
                        width: 200
                    },
                    {
                        title: "操作",
                        templet: "#tabOperation"
                    }]]
                });
                table.on('sort(test)', function (obj) {
                    tabObj.reload({ initSort: obj, where: { field: obj.field, order: obj.type } });
                });
            });
            $("#test2").click(async function () {
          
                const a = {
                    name: $("#name").val()
                    ,ename:$("#playName").val()
                    , image: $("#getPath").val()
                }
           
                const id = localStorage.getItem("actorid")
                const movie = await $.getJSON("/api/movie/" + id);
                movie.data.actor.push(a)
                console.log(movie.data)
                await $.ajax({
                    url: "/api/movie/" + id,
                    contentType:"application/json",
                    method: "put",
                    data: JSON.stringify(movie.data)
                });
                layer.msg('成功', {
                    icon: 1,
                    time: 1000
                }, function () {
                    localStorage.removeItem("actorid")
                });

            })
           


        </script>
        <script type="text/html" id="tabOperation">
                <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delCourse('{{d._id}}', this)">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                </div>
          
       </script>
       <script>
      async function delCourse(id, btn) {
                layer.confirm('确定删除吗？', {
                    icon: 3,
                    title: '提示'
                }, async function (index) {
                    const aid = localStorage.getItem("actorid")
                    const movie = await $.getJSON("/api/movie/" + aid);
                    _.remove(movie.data.actor,item=>item._id ===id);
                    await $.ajax({
                        url: "/api/movie/" +aid,
                        contentType: "application/json",
                        method: "put",
                        data: JSON.stringify(movie.data)
                    });
                    layer.msg('成功', {
                        icon: 1,
                        time: 1000
                    }, function () {
                        localStorage.removeItem("actorid")
                    });
                    $(btn).parents("tr").remove();
                    layer.close(index);
                });
            }
       
       </script>
       <script type="text/html" id="img">
        <img src="{{d.image}}" alt="">
       </script>
</body>

</html>